<template>
	<div>
		<el-table
			v-loading="loading"
			element-loading-spinner="el-icon-loading"
			border
			size="mini"
			class="small-size-table"
			:data="dataList"
			style="width: 100%;"
			highlight-current-row
			header-align="center"
			:header-cell-style="getRowClass"
			:max-height="tableHeight"
		>
			<el-table-column
				type="index"
				label="序号"
				width="150"
				align="center"
			/>
			<el-table-column
				align="center"
				label="登录IP"
				min-width="300"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.ip || '-' }}
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			v-if="total"
			class="pageValue"
			background
			layout="total, sizes,prev, pager, next, jumper"
			:current-page.sync="pageNum"
			:page-size="pageSize"
			:page-sizes="pageSizes"
			:total="total"
			:pager-count="9"
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		/>
	</div>
</template>

<script>
import list from '@/mixins/list'
export default {
	mixins: [list],
	props: {
		params: {
			type: Object,
			default: () => {
				return {}
			}
		},
		tableHeight: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			loading: false,
			dataList: []
		}
	},
	watch: {
		params: {
			handler(val) {
				if (val?.userName && val?.deskmateUserName) {
					this.getDataList()
				} else {
					this.dataList = []
				}
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		getDataList() {
			this.loading = true
			this.dataList = []
			const params = this.getParams(this.params)
			this.$api
				.getPartnerQuerySameIpBend(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						this.dataList = res?.data?.record || []
						this.total = res?.data?.totalRecord || 0
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.getDataList()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.getDataList()
		}
	}
}
</script>
